@extends('admin.layout.layout', ['row' => @$page])

@section('title', @$page['title'])

@section('contain')
    <link rel="stylesheet" href="/dist/admin/stat.css">
    <div class="container stat-container" style="max-width: 1300px;">
        <div style="width: 50%;float: left; padding: 5px 10px;">
            <div style="float: left; width: 12%;">
                <button type="button" class="btn btn-secondary" id="all_country">全国</button>
            </div>
            <div style="float: left; width: 40%;">
                <div class="input-group mb-3 custom-control-inline">
                    <div class="input-group-prepend">
                        <span class="input-group-text">省代</span>
                    </div>
                    <select class="form-control" style="width: 60%" id="distributions">
                        <option selected disabled value="">选择省代</option>
                        @if (!empty($distributions))
                            @foreach($distributions as $distribution)
                                <option value="{{ $distribution->id }}">{{ $distribution->abbr }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
            <div class="input-group mb-3 custom-control-inline" style="float: left; width: 40%; margin-left:5%;">
                <div class="input-group-prepend">
                    <span class="input-group-text">经销商级别</span>
                </div>
                <select class="form-control" style="width: 30%;" id="mdtype">
                    <option value="all">所有</option>
                    @foreach([1,2,3,4,5,0] as $v)
                        <option value="{{ $v }}">{{ ts('mdtype'.$v) }}</option>
                    @endforeach
                </select>
            </div>

        </div>
        <div style="width: 50%;float: left; padding: 5px 10px;">
            <div class="input-group mb-3 custom-control-inline" style="float: left; width: 30%;">
                <div class="input-group-prepend">
                    <span class="input-group-text">钻石等级</span>
                </div>
                <select class="form-control" style="width: 50%;" id="zsdj">
                    <option value="all">所有</option>
                    @foreach([0,3,5] as $v)
                        <option value="{{ $v }}">{{ ts('zsdj'.$v) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="input-group mb-3 custom-control-inline" style="float: left; width: 30%;">
                <div class="input-group-prepend">
                    <span class="input-group-text">年份</span>
                </div>
                <select class="form-control" style="width: 50%;" id="year">
                    @for ($i = date('Y'); $i >= 2016; $i--)
                        <option value="{{ $i }}">{{ $i }}</option>
                    @endfor
                </select>
            </div>
            <div class="input-group mb-3 custom-control-inline" style="float: left; width: 30%;">
                <div class="input-group-prepend">
                    <span class="input-group-text">月份</span>
                </div>
                <select class="form-control" style="width: 50%;" id="month">
                    <option value="">月份总计</option>
                    <option value="01">1</option>
                    <option value="02">2</option>
                    <option value="03">3</option>
                    <option value="04">4</option>
                    <option value="05">5</option>
                    <option value="06">6</option>
                    <option value="07">7</option>
                    <option value="08">8</option>
                    <option value="09">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col">门店返点排名</div>
                    <div class="col" style="text-align: right;">
                        <span style="cursor: pointer;display: none;" id="return_store_price">返回</span>
                        <a href="/admin/stat_compare/comparePrice">
                            <span style="cursor: pointer" id="look_detail">详情</span>
                        </a>
                    </div>
                </div>
                <div class="show_line_area" id="store_price" ></div>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col" style="float: left;padding-left: 10px;">店铺数量<span id="total_store_num"></span></div>
                    <div class="col" style="text-align: right;">
                        <span style="cursor: pointer;display: none;" id="return_store_type">返回</span>
                    </div>
                </div>
                <div class="show_line_area" id="store_type" ></div>
            </div>
        </div>
        <br clear="all" />
    </div>
    </div>
@endsection
@section('script')
    <script src="https://code.highcharts.com/highcharts.src.js"></script>
    <script src="/dist/admin/stat.js"></script>
    <script type="text/javascript">
        $(function () {
            storePrice();
            showStoreTypeNum();

            $("#year").on("change", function () {
                storePrice();
                showStoreTypeNum();
            });
            $("#mdtype").on("change", function (){
               storePrice();
               showStoreTypeNum();
            });
            $("#zsdj").on("change", function (){
                storePrice();
                showStoreTypeNum();
            });
            $("#distributions").on("change", function () {
                storePrice();
                showStoreTypeNum();
                $("#all_country").removeClass('btn-secondary').addClass('btn-primary');
            });
            $("#month").on("change", function() {
                storePrice();
                showStoreTypeNum();
            });

            $("#return_store_price").on('click', function() {
                $(this).hide();
                $("#look_detail").show();
                storePrice();
            });

            $("#all_country").on('click', function () {
                $("#distributions").val('').trigger('change');
                $(this).removeClass('btn-primary').addClass('btn-secondary');
            });
        });

        $("#return_store_type").on("click", function () {
            $(this).hide();
            showStoreTypeNum();
        });

        function showAllStores(name) {
            $.ajax({
                url: '/admin/stat/storeProvince',
                type: 'get',
                data: {
                    year: $("#year").val(),
                    month: $("#month").val(),
                    dist_id: $("#distributions").val(),
                    zsdj: $("#zsdj").val(),
                    mdtype: $("#mdtype").val(),
                    name: name,
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.list == '' || typeof data.list == 'undefined') {
                        return;
                    }
                    let table = '<table class="table">';
                    table += '<thead><tr style="background-color: rgb(248, 248, 248);"><th>店铺名</th></tr></thead>';
                    for (let i in data.list) {
                        table += '<tr><td>' + data.list[i]['abbr'] + '</td></tr>';
                    }
                    table += '</table>';
                    $("#return_store_type").show();
                    $("#store_type").empty().addClass('show-over').append(table);
                }
            });
        }

        function showStoreTypeNum() {
            $.ajax({
                url: '/admin/stat/store_type_stat',
                type: 'get',
                data: {
                    year: $("#year").val(),
                    month: $("#month").val(),
                    dist_id: $("#distributions").val(),
                    dealer_id: $("#dealers").val(),
                    zsdj: $("#zsdj").val(),
                    mdtype: $("#mdtype").val(),
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (typeof data.list == 'undefined' || data.list.length <= 0) {
                        data.list = [];
                    }
                    if (typeof data.total !== 'undefined' && data.total > 0) {
                        $("#total_store_num").text(' (' + data.total + '个)');
                    }

                    Highcharts.chart('store_type', {
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'pie'
                        },
                        title: {
                            text: ''
                        },
                        credits: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.y}个占比{point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                },
                                events: {
                                    click: function (event) {
                                        console.log(event);
                                        showAllStores(event.point.name);
                                    }
                                }
                            }
                        },
                        series: [{
                            name: '店铺',
                            colorByPoint: true,
                            data: data.list
                        }]
                    });
                }
            });
        }

        function storePrice() {
            $.ajax({
                url: '/admin/stat/store_price',
                type: 'get',
                data: {
                    year: $("#year").val(),
                    month: $("#month").val(),
                    dist_id: $("#distributions").val(),
                    zsdj: $("#zsdj").val(),
                    mdtype: $("#mdtype").val(),
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    let result = [];
                    if (typeof data.list == 'undefined' || data.list.length <= 0) {
                        data.list = [];
                    }

                    Highcharts.chart('store_price', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: ''
                        },
                        credits: {
                            enabled: false
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                rotation: -45  // 设置轴标签旋转角度
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: '',
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: '质保分数: <b>{point.y} </b>'
                        },
                        plotOptions: {
                            series: {
                                cursor: 'pointer',
                                events: {
                                    click: function(event) {
                                        console.log(event);
                                        showDealerRolls(event.point.name);
                                    }
                                }
                            }
                        },
                        series: [{
                            name: '质保分数',
                            data: data.list,
                            dataLabels: {
                                enabled: true,
                                rotation: -90,
                                color: '#FFFFFF',
                                align: 'right',
                                format: '{point.y:.2f}', // :.1f 为保留 1 位小数
                                y: 10
                            }
                        }]
                    });
                }
            });
        }

        function showDealerRolls(name) {
            $("#look_detail").hide();
            $.ajax({
                url: '/admin/stat/dealerPrice',
                type: 'get',
                data: {
                    year: $("#year").val(),
                    month: $("#month").val(),
                    dist_id: $("#distributions").val(),
                    name: name,
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    let result = [];
                    if (typeof data.list == 'undefined' || data.list.length <= 0) {
                        data.list = [];
                    }
                    let table = '<table class="table">';
                    table += '<thead><tr style="background-color: rgb(248, 248, 248);"><th>日期</th><th>质保分数</th></tr></thead>';
                    for (let i in data.list) {
                        table += '<tr><td>' + data.list[i]['create_month'] + '</td><td>' + data.list[i]['total_price'] + '</td></tr>';
                    }
                    table += '</table>';
                    $("#return_store_price").show();
                    $("#store_price").empty().addClass('show-over').append(table);
                },
            });
        }
    </script>
@endsection
